<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable = no">
    <title>小米移动端</title>
    <!-- 引入移动端公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入css样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入index页面的通用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入iconfont字体图标样式 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入小米favicon -->
    <link rel="shortcut icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon">
    <!-- 引入JS文件 -->
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 顶部固定模块 -->
    <div class="top">
        <!-- 头部 -->
        <div class="header">
            <img src="./images/top-add.png" alt="">
        </div>
        <!-- search模块 -->
        <div class="search-nav">
            <div class="logo">
                <a href=""></a>
            </div>
            <div class="search">
                <span class="iconfont icon-sousuo"></span>
                <input type="text" placeholder="搜索商品名称">
            </div>
            <div class="iconfont icon-dibutubiao_wode"></div>
        </div>
        <!-- nav部分 -->
        <div class="nav">
            <nav>
                <ul>
                    <li>推荐</li>
                    <li>手机</li>
                    <li>智能</li>
                    <li>电视</li>
                    <li>笔记本</li>
                    <li>家电</li>
                </ul>
            </nav>
            <div class="iconfont icon-down"></div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
        <ul>
            <li>
                <img src="./images/banner1.jpg" alt="">
            </li>
            <li>
                <img src="./images/banner2.jpg" alt="">
            </li>
            <li>
                <img src="./images/banner3.jpg" alt="">
            </li>
            <li>
                <img src="./images/banner1.jpg" alt="">
            </li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!-- icon-list部分 -->
    <div class="icon-list">
        <ul>
            <li>
                <img src="./images/nav1.png" alt="">
            </li>
            <li>
                <img src="./images/nav2.webp" alt="">
            </li>
            <li>
                <img src="./images/nav3.webp" alt="">
            </li>
            <li>
                <img src="./images/nav4.webp" alt="">
            </li>
            <li>
                <img src="./images/nav5.webp" alt="">
            </li>
            <li>
                <img src="./images/nav6.webp" alt="">
            </li>
            <li>
                <img src="./images/nav7.png" alt="">
            </li>
            <li>
                <img src="./images/nav8.png" alt="">
            </li>
            <li>
                <img src="./images/nav9.webp" alt="">
            </li>
            <li>
                <img src="./images/nav10.png" alt="">
            </li>
        </ul>
    </div>
    <!-- 红包 -->
    <div class="red-bag">
        <ul>
            <li>
                <img src="./images/f1_l.webp" alt="">
            </li>
            <li>
                <img src="./images/f1_c.webp" alt="">
            </li>
            <li>
                <img src="./images/f1_r.webp" alt="">
            </li>
        </ul>
    </div>
    <!-- hot-shop部分 -->
    <div class="hot-shop">
        <div class="left-box">
            <img src="./images/f2_l.webp" alt="">
        </div>
        <div class="right-box">
            <div class="top-box">
                <img src="./images/f2_r1.webp" alt="">
            </div>
            <div class="bottom-box">
                <img src="./images/f2_r2.webp" alt="">
            </div>
        </div>
    </div>
    <!-- xiaomi10 & redmi note8 -->
    <div class="xiaomi10_note8">
        <div class="xiaomi10">
            <img src="./images/f3.webp" alt="">
        </div>
        <div class="note8">
            <img src="./images/f4.webp" alt="">
        </div>
    </div>
    <!-- Phone部分 -->
    <div class="Phone">
        <div class="shop-list">
            <ul>
                <li>
                    <a href="">
                        <img src="./images/f5_l.jpg" alt="">
                        <div class="shop-info">
                            <p>小米10 Pro</p>
                            <p>骁龙865/50倍变焦</p>
                            <p>￥4999起
                                <span>￥<del>5999</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/f5_r.jpg" alt="">
                        <div class="shop-info">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>￥3699起
                                <span>￥<del>3999</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/f5_l.jpg" alt="">
                        <div class="shop-info">
                            <p>小米10 Pro</p>
                            <p>骁龙865/50倍变焦</p>
                            <p>￥4999起
                                <span>￥<del>5999</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/f5_r.jpg" alt="">
                        <div class="shop-info">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>￥3699起
                                <span>￥<del>3999</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/f5_l.jpg" alt="">
                        <div class="shop-info">
                            <p>小米10 Pro</p>
                            <p>骁龙865/50倍变焦</p>
                            <p>￥4999起
                                <span>￥<del>5999</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/f5_r.jpg" alt="">
                        <div class="shop-info">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>￥3699起
                                <span>￥<del>3999</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>

            </ul>
        </div>
        <div class="more">更多小米手机产品 ></div>
    </div>
    <!-- 小米电视 -->
    <div class="TV">
        <div class="xiaomiTV">
            <img src="./images/TV.webp" alt="">
        </div>
        <div class="more">更多小米电视产品 ></div>
    </div>
    <!-- 小米笔记本 -->
    <div class="Notebook">
        <div class="xiaomi_Notebook">
            <img src="./images/redmibook.webp" alt="">
        </div>
        <div class="shop-list">
            <ul>
                <li>
                    <a href="">
                        <img src="./images/Notebook1.jpg" alt="">
                        <div class="shop-info">
                            <p>小米笔记本Pro 15</p>
                            <p>大师屏 轻薄大作 | 芯怀猛虎 炸裂性能</p>
                            <p>￥6399起
                                <span>￥<del>6499</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/Notebook2.jpg" alt="">
                        <div class="shop-info">
                            <p>小米笔记本Pro 14</p>
                            <p>大师屏 轻薄大作 | 芯怀猛虎 炸裂性能</p>
                            <p>￥5499起
                                <span>￥<del>5599</del></span>
                            </p>
                            <div class="buy">立即购买</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="more">更多小米笔记本产品 ></div>
    </div>
    <!-- 小米净水器 -->
    <div class="water">
        <div class="mi_water">
            <img src="./images/water.webp" alt="">
        </div>
        <div class="more">更多米家家电产品 ></div>
    </div>
    <!-- 小米手表 -->
    <div class="watch">
        <div class="line"></div>
        <div class="mi_watch">
            <img src="./images/redmiwatch.webp" alt="">
        </div>
        <div class="line"></div>
        <div class="more">
            更多米家智能产品 >
        </div>
    </div>
    <!-- list-items部分 -->
    <div class="list-items">
        <div class="line"></div>
        <div class="items">
            <ul>
                <li>
                    <a href="">
                        <img src="./images/study.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/saodi.webp" alt="">
                    </a>
                </li>
                <li class="up_down">
                    <a href="">
                        <img src="./images/list3.webp" alt="">
                    </a>
                </li>
                <li class="up_down">
                    <a href="">
                        <img src="./images/list4.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/list5.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/list6.webp" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="line"></div>
    </div>
    <!-- 以旧换新部分 -->
    <div class="oldToNew">
        <div class="old_to_new">
            <img src="./images/oldToNew.webp" alt="">
        </div>
    </div>
    <!-- 了解小米 -->
    <div class="aboutMi last">
        <img src="./images/aboutMi.png" alt="">
    </div>



    <!-- 到底提示 -->
    <!-- <div class="footer-text last">
        已经到底啦...
    </div> -->
    <!-- 底部导航栏 -->
    <div class="footer">
        <ul>
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-icon04"></i>
                <span>分类</span>
            </li>
            <li>
                <i class="iconfont icon-xingqiu"></i>
                <span>米圈</span>
            </li>
            <li>
                <i class="iconfont icon-gouwuche"></i>
                <span>购物车</span>
            </li>
            <li>
                <i class="iconfont icon-dibutubiao_wode"></i>
                <span>我的</span>
            </li>
        </ul>
    </div>
</body>

</html>